import React, { useId } from "react";
import { Form, Input, Button, Select, InputNumber, Switch } from "antd";
import { SendOutlined } from "@ant-design/icons";

import styles from "./index.module.less";

interface PropsI {
	handleFormSubmit: (values: any) => void;
	children?: React.ReactElement;
}

const MessageForm: React.FC<PropsI> = (props: PropsI) => {
	const [chatForm] = Form.useForm();
	// const [message, setMessage] = React.useState<string>("");
	const { handleFormSubmit } = props;
	const tipId = useId();
	const tips: any = [];
	// const handleMessageChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
	// 	// console.log(e.target.value);
	// 	setMessage(e.target.value);
	// };

	return (
		<div className={styles["wrapper"]}>
			<div className={styles.messageForm}>
				<div className={styles.tips}>
					{tips.map((item: any) => (
						<div key={tipId}>item</div>
					))}
				</div>
			</div>
			<div className={styles.messageForm}>
				<div className={styles.statement}>
					<span>GPT可能犯错误，重要信息请复核确认。</span>
				</div>
				<Form form={chatForm} onFinish={handleFormSubmit} initialValues={{ model: "Qwen-14B-Chat", temperature: 1, stream: false, role: "user" }}>
					<Form.Item name="role" label="role" hidden={true} rules={[{ required: true }]}>
						<Input />
					</Form.Item>
					<Form.Item name="model" label="model" hidden={true} rules={[{ required: true }]}>
						<Select
							options={[
								{ value: "Qwen-7B-Chat", label: <span>Qwen-7B-Chat</span> },
								{ value: "Qwen-14B-Chat", label: <span>Qwen-14B-Chat</span> }
							]}></Select>
					</Form.Item>
					<Form.Item name="temperature" label="temperature" hidden={true} rules={[{ required: true }]}>
						<InputNumber max={10} min={0} />
					</Form.Item>
					<Form.Item name="stream" label="stream" hidden={true} rules={[{ required: true }]}>
						{/* <Switch defaultValue={false}></Switch> */}
						<Switch checked={false}></Switch>
					</Form.Item>
					<Form.Item name="content" rules={[{ required: true }]}>
						<Input.TextArea rows={6} placeholder="请输入您的问题..." />
					</Form.Item>
					<Form.Item>
						<Button type="primary" htmlType="submit">
							<SendOutlined /> 发送
						</Button>
					</Form.Item>
				</Form>
			</div>
		</div>
	);
};

export default MessageForm;
